<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{ pageTitle }}
      <span class="text-subtitle1">{{ pageSubTitle }}</span>
    </div>
    <div class="q-pa-sm shadow-2 row q-mb-md">
      <div class="q-gutter-sm">
        <q-btn color="primary" icon="arrow_back" outline :title="$t('返回')" no-caps @click="detailNav.goBackToList" />
        <q-btn v-if="isViewOrEditMode" :disable="loadingState" :loading="loadingState" color="primary" dense
          icon="refresh" outline :title="$t('刷新')" no-caps @click="loadModelData" />
        <q-btn
          v-if="fx.hasModifyRight('Comm.Company.Edit') && isViewMode" :disable="loadingState" color="primary"
          icon="edit" :label="$t('编辑')" no-caps @click="detailNav.goEditMode" />
        <q-btn v-if="fx.hasModifyRight('Comm.Company.Edit') && isViewMode" :disable="loadingState" color="red"
          icon="delete_outline" :label="$t('删除')" no-caps @click="deleteCompany" />
        <q-btn v-if="isCreateOrEditMode" :disable="submittingState || loadingState" :loading="submittingState" color="primary"
          :label="$t('确定')" no-caps
          @click="doSubmit" />
        <q-btn v-if="isEditMode" :disable="submittingState" color="primary" :label="$t('取消')" no-caps outline
          @click="detailNav.cancelSubmit" />
      </div>
    </div>
    <!--错误提示-->
    <q-banner v-if="serverErrorMessage" class="text-white bg-red q-my-md" dense inline-actions>
      {{ serverErrorMessage }}
      <template v-slot:action>
        <q-btn dense flat icon="close" size="sm" @click="serverErrorMessage=null" />
      </template>
    </q-banner>
    <form-field-group :model-with-create-update="$d.form" model-id="companyId" title="主要信息" no-caps >
      <div class="q-pa-sm">
        <div class="row q-col-gutter-sm">
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <q-icon color="red" name="fas fa-asterisk" size="10px" />
            <span>{{$t('公司简称')}}</span>
            <q-input v-model="$d.form.abbrName" :error="v$.abbrName.$error" :error-message="e$(v$.abbrName.$errors)"
              :hide-bottom-space="true" :readonly="isViewMode" autofocus dense :maxlength="30" no-error-icon outlined
              square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <q-icon color="red" name="fas fa-asterisk" size="10px" />
            <span>{{$t('中文全称')}}</span>
            <q-input v-model="$d.form.fullNameC" :error="v$.fullNameC.$error"
              :error-message="e$(v$.fullNameC.$errors)"
              :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30" no-error-icon outlined
              square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('英文全称')}}</span>
            <q-input v-model="$d.form.fullNameE" :hide-bottom-space="true" :readonly="isViewMode" dense
              :maxlength="100"
              outlined square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('有效')}}</span>
            <div class="bg-grey-3">
              <q-checkbox v-model="$d.form.isEnabled" :disable="isViewMode" class="full-width q-pa-xs" color="primary"
                dense />
            </div>
          </div>
        </div>
      </div>
    </form-field-group>
    <form-field-group class="q-mt-md" title="联系方式" no-caps>
      <div class="q-pa-sm">
        <div class="row q-col-gutter-sm">
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('网址')}}</span>
            <q-input v-model="$d.form.website" :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="100"
              outlined square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('邮编')}}</span>
            <q-input v-model="$d.form.postcode" :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30"
              outlined square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('联系电话')}}</span>
            <q-input v-model="$d.form.phone" :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30"
              outlined square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('传真')}}</span>
            <q-input v-model="$d.form.fax" :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30"
              outlined
              square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('联系人')}}</span>
            <q-input v-model="$d.form.contactP" :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30"
              outlined square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('企业代码')}}</span>
            <q-input v-model="$d.form.enterpriseCode" :hide-bottom-space="true" :readonly="isViewMode" dense
              :maxlength="30" outlined square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('组织机构代码')}}</span>
            <q-input v-model="$d.form.orgCode" :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30"
              outlined square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('税务登记号')}}</span>
            <q-input v-model="$d.form.taxCode" :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="30"
              outlined square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('法人代表')}}</span>
            <q-input v-model="$d.form.legalPerson" :hide-bottom-space="true" :readonly="isViewMode" dense
              :maxlength="30"
              outlined square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('海关十位编码')}}</span>
            <q-input :error="v$.customsCode.$error" :error-message="e$(v$.customsCode.$errors)" v-model="$d.form.customsCode" :hide-bottom-space="true" :readonly="isViewMode" dense
              :maxlength="10"
              outlined square stack-label></q-input>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <span>{{$t('商检十位编码')}}</span>
            <q-input :error="v$.ciqCode.$error" :error-message="e$(v$.ciqCode.$errors)" v-model="$d.form.ciqCode" :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="10"
              outlined square stack-label></q-input>
          </div>
        </div>
      </div>
    </form-field-group>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'companyStd'
}
</script>

<script lang="ts" setup>
import {useTitleHelper} from '../../hooks/titleHelper'
import {useDetailHelper} from '../../hooks/detailHelper'
import {computed, reactive, ref} from 'vue'
import {CompanyFull} from '../../defs/company'
import useVuelidate from '@vuelidate/core'
import FormFieldGroup from '../../components/FormFieldGroup.vue'
import { useI18n } from 'vue-i18n'
const {t} = useI18n()

const pageTitle = t('公司管理')
useTitleHelper(pageTitle)

// 新建时候的默认值
const defFormDataForCreate = {
  isEnabled: true
}

const $d = reactive({
  // 表单数据
  form: {} as CompanyFull
})

//region 表单验证
const validators = $f.validators
const rules = {
  abbrName: {
    required: validators.required
  },
  fullNameC: {
    required: validators.required
  },
  customsCode: {
    equalLength: validators.equalLength(10)
  },
  ciqCode: {
    equalLength: validators.equalLength(10)
  }
}
const v$ = useVuelidate(rules, computed(() => $d.form), {$autoDirty: true})
//endregion

const serverErrorMessage = ref('')
const loadingState = ref(false)
// 加载数据
const loadModelData = function () {
  serverErrorMessage.value = ''
  loadingState.value = true
  $f.axios
    .get<CompanyFull>('/comm/company/get-company-by-id/' + decodeURIComponent(detailInfo.itemId))
    .then((result) => {
      $d.form = result.data
      $f.misc.simpleAssign($d.form, result.data)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

//region FPS配置
const {
  detailInfo,
  detailStatus,
  detailNav
} = useDetailHelper('/comm/basic/company',
  $d.form,
  defFormDataForCreate,
  '/comm/basic/company',
  '/comm/basic/company/detail',
  '/comm/basic/company/create',
  '/comm/basic/company/edit',
  loadModelData,
  serverErrorMessage
)
const {
  isViewMode,
  isCreateMode,
  isEditMode,
  isCreateOrEditMode,
  isViewOrEditMode,
  pageSubTitle
} = detailStatus
//endregion

// 数据加载/提交状态
const submittingState = ref(false)
// 修改/新增提交
const doSubmit = function () {
  serverErrorMessage.value = ''
  void v$.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        if (isCreateMode.value) {
          submittingState.value = true
          $f.axios
            .post('/comm/company/create-company', $d.form)
            .then(() => {
              detailNav.goBackToList()
            })
            .catch((err) => {
              serverErrorMessage.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingState.value = false
            })
        } else if (isEditMode) {
          submittingState.value = true
          $f.axios.post('/comm/company/update-company', $d.form)
            .then(() => {
              detailNav.doneEdit()
            })
            .catch((err) => {
              serverErrorMessage.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingState.value = false
            })
        }
      }
    })
}

// 删除公司
const deleteCompany = function () {
  void $f.ui.messageBox({
    caption: t('操作确认'),
    text: t('确定要删除该公司吗?'),
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/comm/company/delete-company/' + detailInfo.itemId)
        .then(() => {
          $f.ui.closeMsgBox()
          detailNav.goBackToList()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: t('删除失败'),
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close'
          })
        })
    }
  })
}

const fx = $f
const e$ = $f.getFieldErrStr

</script>
